<template>
	<view>
		<view class="plr15 ptb20">
			<view class="align-center justify-between ft12">
				<view class="">
					<text class="ft15">{{$t('mine').添加图片}}</text>
					<text class="">（{{$t('mine').最多上传张}}）</text>
				</view>
				<view class="light" @click="show=true">{{$t('mine').查看示例}}</view>
			</view>
			<view class="flex-wrap">
				<view class="items overhide mt10 posRelative mr10" v-for="(item,index) in imageList" :key="index">
					<image :src="item" mode="aspectFill" style="width: 188rpx;height: 188rpx;" @click="seePicture(item)"></image>
					<view class="posAbsort rt0 top0" @click="deletePic(index)">
						<image src="../../static/images/wallet/delete.png" mode="aspectFill"
							style="width: 38rpx;height: 38rpx;"></image>
					</view>
				</view>
				<view class="items overhide mt10 " v-if="imageList.length<9" @click="chooseImage()">
					<image src="../../static/images/wallet/add.png" mode="aspectFill"
						style="width: 188rpx;height: 188rpx;"></image>
				</view>
			</view>
			<mix-button ref="confirmBtn" :text="$t('shop').提交" marginTop="70rpx" @onConfirm="submit"></mix-button>
		</view>
		<u-popup :show="show" @close="close" mode="center" bgColor="transparent" :safeAreaInsetBottom="false">
			<view class="w100" style="width: 750upx;">
				<swiper class="swiper" duration="500" indicator-active-color="#3792FA" next-margin="100rpx"
					previous-margin="100rpx" style="height: 684upx;">
					<swiper-item v-for="(item,index) in expImages" :key="index" class="">
						<view class="bgWhite radius8" style="height: 684upx;width: 514upx;" @click="seePicture(item)">
							<image :src="item" class="radius10 w100"
								mode="aspectFit" style="height: 100%;"></image>
						</view>
					</swiper-item>
				</swiper>
				<div class="justify-center mt15">
					<u-icon name="close-circle" color="#ffffff" size="30" @click="show=false"></u-icon>
				</div>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				imageList: [], //图片地址
				expImages: [
					'../../static/images/mine/exp1.png',
					'../../static/images/mine/exp2.png',
					'../../static/images/mine/exp3.png',
					'../../static/images/mine/exp4.png',
					'../../static/images/mine/exp5.png',
					'../../static/images/mine/exp6.png'
				]
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: this.$t('mine').上传凭证
			})
		},
		methods: {
			// 删除图片
			deletePic(index) {
				this.imageList.splice(index, 1)
			},
			randNum(min, max) {
				return Math.floor(Math.random() * (max - min)) + min + Date.now();
			},
			// 新增图片
			chooseImage() {
				let count = 9 - this.imageList.length;
				uni.chooseImage({
					count: count,
					success: (chooseImageRes) => {
						let key;
						// #ifdef MP-WEIXIN  
						key = '.' + chooseImageRes.tempFiles[0].path.toLowerCase().split('.')[1];
						// #endif
						// #ifdef H5
						key = chooseImageRes.tempFiles[0].name;
						// #endif
						this.$api.qiniuToken().then((res) => {
							let uploadMsg = res.data;
							for (var i = 0; i < chooseImageRes.tempFiles.length; i++) {
								let uniqueCode = this.randNum(100, 5);
								let formData = {
									'key': 'userfile/' + uniqueCode + key,
									'token': uploadMsg.token
								}
								let options = {
									filePath: chooseImageRes.tempFilePaths[i],
									name: 'file',
									formData: formData,
								}
								this.$api.uploadImg(options).then((res) => {
									let partImgUrl = uploadMsg.url + '/' + res;
									if(this.imageList.length<9){
										this.imageList.push(partImgUrl);
									}
									console.log(this.imageList.length)
								})
							}
						})

					},
					fail(err) {
						console.log("err" + err)
					},
				});
			},
			close() {
				this.show = false
			},
			// 提交
			submit() {
				uni.navigateBack()
			},
			seePicture(item) {
				this.show = false
				let itemList = []
				itemList.push(item)
				uni.previewImage({
					urls: itemList,
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #ffffff;
	}

	/deep/.u-upload__wrap__preview__image,
	/deep/.u-upload__button {
		width: 188upx !important;
		height: 188upx !important;
	}
</style>